<template>
  <!-- //! 模板中使用 ref 类型的数据，不要 .value，因为 Vue 会自动加（自动解包） -->
  <p>{{count}}</p>  
  <button @click="updateCount">+1</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // !ref 可以把任意类型包装成响应式的对象
    const count = ref(1)
    const updateCount = () => {
      // !在 JS 中使用这个对象，要加 .value 才是包装的数据
      count.value ++
    }
    return { count, updateCount } 
  }
}
</script>